<template id="carType">
  <div>
    <el-row style="height: 100%;border: 1px solid #DCDFE6;margin-top: 10px">
      <el-col :span="6" style="border-right: 1px solid #DCDFE6; min-height:500px;">
        <div class="grid-content bg-purple">
          <el-tree :data="carTypes" :props="defaultProps" @node-click="handleNodeClick">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="17" style="margin-left: 10px;padding-top: 10px">
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true" :model="query">
            <el-form-item>
              <el-input v-model="query.keyword" placeholder="关键字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-on:click="getList">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleAdd">新增</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="datas" highlight-current-row @selection-change="selsChange" style="width: 100%;">
          <el-table-column type="selection">
          </el-table-column>
          <el-table-column prop="name" label="标题" width="120" sortable>
          </el-table-column>
          <el-table-column prop="logo" label="LOGO" width="120" sortable>
          </el-table-column>
          <el-table-column prop="description" label="描述" width="120" sortable>
          </el-table-column>
          <el-table-column prop="totalCount" label="课程数量" width="120" sortable>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template scope="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
          <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
        </el-col>
      </el-col>
    </el-row>

    <!--新增/修改界面-->
    <el-dialog title="新增/修改" :visible.sync="saveFormVisible" :close-on-click-modal="false">
      <el-form :model="saveForm" label-width="80px" ref="saveForm">
        <el-form-item label="分类标题" prop="name">
          <el-input v-model="saveForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="logo" prop="logo">
          <el-input v-model="saveForm.logo" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sortIndex">
          <el-input v-model="saveForm.index" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="saveForm.description" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="saveFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
.el-row {
  margin-bottom: 20px;
  height: 100%;
}

:last-child {
  margin-bottom: 0;
}

#carType el-col {
  border: 1px solid red;
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

<script>
export default {
  data() {
    return {
      // 高级查询
      query: {
        id: null,
        keyword: '',
      },
      saveForm: {
        name: "",
        logo: "",
        index: "",
        description: "",
        pid: ""
      },
      saveFormVisible: false,
      sels: [],
      filters: {
        keyword: ""
      },
      datas: [],
      carTypes: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    handleAdd() {
      let id = this.saveForm.pid
      this.saveForm = {
        name: "",
        logo: "",
        index: "",
        description: "",
        pid: id
      }
      this.saveFormVisible = true;
    },
    addSubmit() {
      //提交
      this.$http.post("/carType", this.saveForm).then(res => {
        //{success: true, ..
        var ajaxResult = res.data;
        if (ajaxResult.success) {
          this.saveFormVisible = false;
          this.getTreeData()
        } else {
          this.$message({
            message: ajaxResult.message,
            type: 'error'
          });
        }
      });
    },

    handleCurrentChange() {

    },
    // 批量删除
    batchRemove() {
      var ids = this.sels.map(item => item.id);
      this.$confirm('确定批量删除选中车辆类型吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$http.patch("/carType", ids)
            .then((result) => {
              result = result.data;
              if (result.success) {
                this.$message({message: '批量删除成功', type: 'success'});
                // this.query.currentPage = 1;
                this.getTreeData()
              } else {
                this.$message({message: '批量删除失败', type: 'error'});
              }
            })
            .catch(result => {

            })
      }).catch(() => {
      })
    },

    handleEdit(index, row) {
      this.saveFormVisible = true
      this.saveForm = Object.assign({}, row);
    },

    handleDel(index, row) {
      this.$http.delete("/carType/" + row.id)
          .then(res => {
            if (res.data.success) {
              this.$message("删除成功")
              this.getTreeData()
            } else {
              this.$message("删除失败,原因是：" + res.data.msg)
            }

          }).catch(res => {

      })
    },
    selsChange(sels) {
      this.sels = sels;
    },
    // 高级查询，还可以查看当前节点的孩子
    getList() {
      this.$http.post("/carType/query", this.query)
          .then(res => {
            if (res.data.success) {
              this.datas = res.data.ajaxObj
              this.$message({message: "查询成功", type: "success"})
            }
          }).catch(res => {
        this.$message("网络异常，消息未发出去")
      })
    },
    handleNodeClick(row) {
      this.datas = row.children;
      this.saveForm.pid = row.id;
      this.query.id = row.id
    },
    getTreeData() {
      // 发送一个异步请求: get请求 /product/carType/treeData
      this.$http.get("/carType/carTypeTree").then(res => {
        this.carTypes = res.data.ajaxObj;
        this.datas = res.data.ajaxObj;
      });
    }
  },
  mounted() {
    //对carTypes数据赋值
    this.getTreeData();
  }
};
</script>